<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- 视口标签 -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->
<link rel="stylesheet" type="text/css"
	href="${path }/resource/css/base.css" />
<link rel="stylesheet" type="text/css"
	href="${path }/resource/css/index.css" />
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=7Bjcf542jgLbEWrGfOTn7PC7tkGhCwK4"></script>

<title>寻找门店</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#map {
	height: 100%
}
</style>
</head>
<body>
	<div id="map" class="wrap"></div>

	<script type="text/javascript">
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${appId}', // 必填，公众号的唯一标识
			timestamp : '${timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${noncestr}', // 必填，生成签名的随机串
			signature : '${signature}',// 必填，签名，见附录1
			jsApiList : [ 'getLocation', 'openLocation' ]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		
		//百度地图
		var map = new BMap.Map("map");
		var store = new BMap.Point(113.020689,28.110913);
		
		var storeMark = new BMap.Marker(store, {
			// 指定Marker的icon属性为Symbol
			icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, {
				scale: 1.5,//图标缩放大小
				fillColor: "red",//填充颜色
				fillOpacity: 1,//填充透明度
				strokeColor : "red",//图标的线填充颜色
				strokeOpacity : 0.8,//设置矢量图标线的透明度,opacity范围0~1
				strokeWeight : 1 //设置线宽
			})
		});
		
		
		//驾车线路规划
		var driving = new BMap.DrivingRoute(map, {
			renderOptions:{map: map, autoViewport: true},
			onMarkersSet : function(pois) {
				$.each(pois, function(i) {
					map.removeOverlay(pois[i].marker);
				})
			}
		});

		wx.ready(function() {
			wx.getLocation({
				type : 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02',
				success : function(res) {
					
					console.log("经纬度：" + res.longitude + ";" + res.latitude);
					//要转换的gps坐标
					var pointArr = [ new BMap.Point(res.longitude, res.latitude) ];
					//把gps坐标转换为百度坐标
					new BMap.Convertor().translate(pointArr, 1, 5, function(data) {
						console.log(data);
						if (data.status === 0) {
							var point = new BMap.Point(data.points[0].lng, data.points[0].lat);
							//map.setCenter(point);
							map.centerAndZoom(store, 15);
							
							driving.search(point, store);
							
							map.addOverlay(storeMark);

							var marker = new BMap.Marker(point, {
								// 指定Marker的icon属性为Symbol
								icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
									scale: 1.5,//图标缩放大小
									fillColor: "red",//填充颜色
									fillOpacity: 1,//填充透明度
									strokeColor : "red",//图标的线填充颜色
									strokeOpacity : 0.8,//设置矢量图标线的透明度,opacity范围0~1
									strokeWeight : 1 //设置线宽
								})
							});
							map.addOverlay(marker);
							
							
						}
					})
				},
				cancel : function(res) {
					// alert('已取消');
				},
				fail : function(error) {
					alert("获取地理位置失败，请确保开启GPS且允许微信获取您的地理位置！");
				}
			});
		});

		wx.error(function(res) {
			alert("微信内部错误");
		});
	</script>
</body>
</html>